<template>
    <el-row :gutter="30">

        <el-col :span="6">
            <el-card shadow="hover" class="tou_xiang" :body-style="{ padding: '20px' }">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                     class="image">
                <div style="text-align: center; margin-top: 20px">
                    <el-button type="primary" round>更换头像</el-button>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card shadow="hover" class="info">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item :label=vlable.number :label-width="formLabelWidth">
                        <el-input v-model="form.stuId" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label=vlable.name :label-width="formLabelWidth">
                        <el-input v-model="form.stuName" disabled autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属班级" :label-width="formLabelWidth">
                        <el-input v-model="form.belong" disabled autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth">
                        <el-radio v-model="form.gender" label="男">男</el-radio>
                        <el-radio v-model="form.gender" label="女">女</el-radio>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth" prop="photo">
                        <el-input v-model="form.photo"></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介" :label-width="formLabelWidth" prop="disc">
                        <el-input type="textarea" v-model="form.disc" style="width: 400px;height:60px;"></el-input>
                    </el-form-item>
                    <el-form-item style="padding-left: 120px">
                        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card >
                <div slot="header">
                    <span>作业通知</span>
                </div>
                <div v-for="(item,i) in information" :key="i" class="text item">
                    <el-popover
                            placement="top-start"
                            title="标题"
                            width="200"
                            trigger="hover"
                            :content=item.context>
                        <el-button slot="reference" style="width: 230px">
                            {{item.name+"老师"}}
                            <span style="color: red;float: right">{{item.status}}</span>
                        </el-button>
                    </el-popover>
                    <hr>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    import store from '../store'
    export default {
        name: "UserInfo",
        data() {
            var validatePhoto = (rule, value, callback) => {
                if (value !== '' && !(/^1[3456789]\d{9}$/.test(value))) {
                    callback(new Error('手机号格式不正确'));
                } else {
                    callback();
                }
            };
            var validateDisc = (rule, value, callback) => {
                if (value !== '' && value.toString().length > 100) {
                    callback(new Error('个人简介不超过100字'));
                } else {
                    callback();
                }
            };
            var validateEmail = (rule, value, callback) => {
                if (value !== '' && !(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/).test(value)) {
                    callback(new Error('邮箱格式不正确'));
                } else {
                    callback();
                }
            };
            return {
                information:[],
                vlable:{number:"",name:""},
                form: {
                    stuId: '',
                    stuName: '',
                    belong: '1',
                    gender: '',
                    email: '',
                    disc: '',
                    photo: ''
                },
                formLabelWidth: '120px',
                rules: {
                    email: [
                        {validator: validateEmail, trigger: 'blur'}
                    ],
                    photo: [
                        {validator: validatePhoto, trigger: 'blur'}
                    ],
                    disc: [
                        {validator: validateDisc, trigger: 'blur'}
                    ]
                },
            }
        },
        methods: {
            getUserInfo() {
                if(store.state.user.level>1){
                    this.vlable.number = "教师编号"
                    this.vlable.name = "教师姓名"
                }else{
                    this.vlable.number = "学生学号"
                    this.vlable.name = "学生姓名"
                }
                this.$http
                    .get("sjrecord/getById?sid="+store.state.user.uid)
                    .then(result => {
                        result.body.forEach(item=>{
                            this.information.push({
                                name: item.tname,
                                context: item.context,
                                status: item.status===0?"未提交":"已提交"
                            });
                        });
                    });
                this.form = {
                    stuId: '2016207314',
                    stuName: '李祥',
                    belong: 'Java 1 班',
                    gender: '男',
                    email: '1739781578@qq.com',
                    disc: '本人性格开朗，为人细心，做事一丝不苟，能吃苦耐劳，工作脚踏实地，有较强的责任心，具有团队合作精神，又具有较强的独立工作能力，思维活跃。',
                    photo: '17561841398'
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$message({
                            type: 'success',
                            message: '修改成功~'
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$message({
                    type: 'success',
                    message: '重置成功~'
                });
            }
        },
        mounted() {

            this.getUserInfo()
        },
        watch: {
            form: function (newV, oldV) {

            }
        }
    }
</script>

<style lang="scss" scoped>


    .el-row {

        .text {
            font-size: 14px;
        }
        .item {
            margin-bottom: 18px;
        }

        .el-form {
            .el-input {
                width: 260px;
            }
        }

        .image {
            width: 100%;
            height: 100%;
        }

        margin-top: 20px;
        margin-left: 20px !important;

        .tou_xiang {
            height: 350px;
        }

        .info {
            height: 550px;
        }
    }

</style>
